<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Vue全家桶_stu/03_依赖包/vue.js"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        const vm = new Vue({
            el:'#root',
            //生命周期钩子
          
            beforeCreate(){
                //在实例初始化之后，数据观测和事件配置之前被调用，
                // 此时组件的选项对象还未创建，el 和 data 并未初始化，
                // 因此无法访问methods， data， computed等上的方法和数据。
                // 此时可以访问this，但是不能访问this身上的方法和属性
            },
            created(){
                // 实例已经创建完成之后被调用，在这一步，实例已完成以下配置：
                // 数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。
                // 此时虚拟dom已经创建完毕，还没有输出到页面上
                // 此时可以访问this身上的方法和属性
            },
            beforeMounte(){
                // 挂载开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置： 
                // 编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。
            },
            mounted(){
                // 挂在完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。
            },
            beforeUpdate(){
                //在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程
                //在此钩子中访问要修改的数据是 修改后的数据
            },
            updatae(){
                // 在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作
            },
            beforedestroy(){
                //在实例销毁之前调用，实例仍然完全可用，
                // 1.这一步还可以用this来获取实例，
                // 2.一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件

            },
            destroyd(){
                //在实例销毁之后调用，调用后，所以的事件监听器会被移除，所有的子实例也会被销毁，
                //但是页面还展示dom。操作功能不可用
            }

        })
    </script>
</body>
</html>